<template>
	<view class="auth">
		<view class="mask">
			<view class="info text-center">
				<view class="header">
					微信授权
				</view>
				<view class="content">
					<view class="logo">
						<image class="" src="../../static/logo.png"></image>
					</view>
					<view class="h4">{{appName}}申请获得以下权限</view>
					<view class="tips text-gray">{{maskTips}}</view>
				</view>
				<view class="btn-group">
					<button open-type="getPhoneNumber" v-if="authPhone" lang="zh_CN" class="btn btn-success" @getphonenumber="getPhoneNumber">同意</button>
					<button open-type="getUserInfo" v-else lang="zh_CN" class="btn btn-success" @getuserinfo="bindGetUserInfo">同意</button>
					<view class="btn btn-warning" bindtap="_deny_tips">拒绝</view>
				</view>
				
				
				<navigator url="login" class="login" v-if="showLogin">帐号密码登录</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import Request from '../../common/request.js';
	import { appName } from '../../common/config.js';
	
	export default {
		data() {
			return {
				maskTips: '获得您的公开信息(昵称、头像等)',
				authPhone: false,
				appName: '',
				infoId: '',
				showLogin: false,
			};
		},
		onLoad() {
			var that = this;
			Request.send({
				url: 'weixinauth/getConfig',
				needLogin: false,
				sCallback: function(res) {
					console.log(res);
					if(res.data.version == '1.0.0') {
						that.showLogin = true;
					}
				}
			})
			
			this.appName = appName;
			
			//获取用户微信基本信息
			wx.getUserInfo({
				lang: 'zh_CN',
				success: function(res){
					//授权成功，把数据和code合并请求到服务器查找用户信息
					console.log('getinfo success');
					console.log(res);
					var wxInfo = res.userInfo;
					wx.login({
						success: function(e) {
						  wxInfo.code = e.code;
						  that.getOpenId(wxInfo);
						}
					});
				},
				fail: function(err){
					//授权失败，表示用户没有授权过，要跳转到授权页
					console.log('没有授权过');
				}
			});
		},
		
		methods: {
			_deny_tips: function() {
				Request.alert('同意授权后才能继续操作');
			},
			bindGetUserInfo: function(e) {
				var that = this;
				if (e.detail.userInfo) {
					var wxInfo = e.detail.userInfo;
					wx.login({
						success: function(e) {
							wxInfo.code = e.code;
							that.getOpenId(wxInfo);
						}
					});
				}
			},
			
			getOpenId(wxInfo){
				var that = this;
				wxInfo.recommend_id = uni.getStorageSync('recommendId');
				wxInfo.recommend_id = '51149';
				//请求服务器成功后，返回的是用户token
				Request.send({
					  url: 'weixinauth/getopenid',
					  data: wxInfo,
					  needLogin: false,
					  sCallback: function(res) {
						  
						  if(res.data.token == undefined) {
							  
							  that.infoId = res.data.id;
							  that.authPhone = true;
							  that.maskTips = '获得您微信绑定的手机号'
							  Request.alert('请继续授权获取您的手机号');
						  } else {
							  uni.setStorageSync('token', res.data.token);
							  uni.setStorageSync('userinfo', res.data);
							  uni.reLaunch({
								url: '/pages/coupon/index'
							  })
						  }
					  }
				})
			},
			
			getPhoneNumber: function(e) {
				console.log(e);
				var that = this;
				wx.login({
					success: function(re) {
						var data = {
							code: re.code,
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData,
							info_id: that.infoId
						}
						
						console.log(data);
						
						Request.send({
							url: 'weixinauth/bindPhone',
							data: data,
							needLogin: false,
							sCallback: function(res) {
								uni.setStorageSync('token', res.data.token);
								uni.setStorageSync('userinfo', res.data);
								uni.reLaunch({
									url: '/pages/coupon/index'
								})
							}
						})
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	/*授权弹窗开始*/
	.mask{
		background: rgba(0,0,0,.4);
		position: fixed;
		z-index: 999;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.mask .info{
		background: #fff;
		width: 450upx;
		margin: 0 auto;
		margin-top: 200upx;
	}

	.mask .header{
		height: 90upx;
		line-height: 90upx;
		border-bottom: 1upx solid #eee;
	}

	.mask .logo{
		padding: 40upx;
	}

	.mask .logo image{
		width: 100upx;
		height: 100upx;
	}

	.mask .content{
		line-height: 60upx;
	}

	.mask .btn-group{
		display: flex;
	}

	.mask .btn-group .btn{
		width: 50%;
		height: 80upx;
		line-height: 80upx;
		color: #fff;
		border-radius: 0;
		padding: 0	
	}

	.mask .btn-group .btn:after{
		border:0;
	}
	
	.auth .login{
		padding: 20upx 0;
		color: #007AFF;
	}
/*结束*/
</style>
